{% extends 'base.html' %}

{% block title %}登陆{% endblock %}

{% block content %}
 <div class="weui-cells__title">登陆</div>
 <div class="weui-cells weui-cells_form">

 	<div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__bd">
          <input name="tel" class="weui-input" type="tel" placeholder="请输入手机号">
        </div>
        <div class="weui-cell__ft">
          <button class="weui-vcode-btn" onclick="getCode(this)">获取动态码</button>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__bd">
          <input name='dnmcCode' class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入动态码">
        </div>
    </div>

<!--     <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__bd">
          <input name="dnmcCode" class="weui-input" type="number" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
          <img class="weui-vcode-img" src="./images/vcode.jpg">
        </div>
    </div> -->

    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:login()" id="showTooltips">登陆</a>
    </div>
 </div>
{% endblock %}

{% block jsblock %}
 /*获取验证码*/
        function getCode(obj) {
            if (checkPhone()) {//验证手机号码
                $.ajax({
                    type: "POST",
                    url: '/auth/sendDnmcCode',
                    data: { tel: $("input[name='tel']").val() },
                    success: function (result) {
                        if (result.success) {

                        }
                        else {
                            $.toptip(result.errorMessage, 'error');
                        }
                    },
                    error: function (result) {
                        $.toptip('未知异常导致请求失败,请重试.', 'error');
                    }
                });
                settime(obj); //倒计时
            }
            else {
                $("input[name='tel']").focus();
                return;
            }
        }
        //验证手机号码
        function checkPhone() {
            var phone = $("input[name='tel']").val();
            var pattern = /^1[0-9]{10}$/;
            if (phone.length == 0) {
                //alert('请输入手机号码');
                $.toptip("请输入手机号码", 'error');
                return false;
            }
            if (!pattern.test(phone)) {
                //alert('请输入正确的手机号码');
                $.toptip("手机号格式错误", 'error');
                return false;
            }
            return true;
        }
        var countdown = 60;
        function settime(obj) {
            if (countdown == 0) {
                $(obj).removeAttr("disabled");
                $(obj).text("获取验证码");
                countdown = 60;
                return;
            } else {
                $(obj).attr("disabled", true);
                $(obj).text(countdown +'s'+'后重发');
                countdown--;
            }
            setTimeout(function () {
                settime(obj)
            }, 1000)
        }

function login() {
    
    if(checkPhone()) {

        var code = $("input[name='dnmcCode']").val();
        if(code.length != 4) {
            $.toptip("请输入正确验证码", 'error');
                    return false;
        }
        
    	$.ajax({
                        type: "POST",
                        url: '/auth/login',
                        data: { tel: $("input[name='tel']").val(),dnmcCode: $("input[name='dnmcCode']").val()},
                        success: function (result) {
                            if (result.success) {
                            	$(location).attr('href', result.redirect2);
                            }
                            else {
                                $.toptip(result.errorMessage, 'error');
                            }
                        },
                        error: function (result) {
                            $.toptip('未知异常导致请求失败,请重试.', 'error');
                        }
                    });
    }

}
{% endblock %}